<template>
  <view class="f-forum">
    <view class="forum-list">
      <view class="forum-item cbox">
        <text class="tit"
          >霜霉病是怎么形成的呢霜霉病是怎么形成的呢霜霉病是怎么形成的?</text
        >
        <view class="head rbox box_y_center box_space_b">
          <view class="user rbox box_y_center">
            <view class="avatar"></view>
            <text class="name">植物病学专家</text>
          </view>
          <view class="quiz">提问</view>
        </view>
        <text class="viewport"
          >霜霉病指的是由真菌中的霜霉菌引起的植物病害。霜霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，如引起谷子白发病的禾生指梗霉、引起白菜霜霉病的寄生霜霉霜霉菌是专性寄生菌，极少数的霜霉菌已可人工培养，如引起谷子白发病的禾生指梗霉、引起白菜霜霉病</text
        >
        <view class="img-wrap rbox_wrap">
          <view class="img"></view>
          <view class="img"></view>
        </view>
        <view class="footer rbox box_y_center box_space_b">
          <view class="date">昨天17:22</view>
          <view class="comment rbox box_y_center">
            <view class="iconfont icon-comments"></view>
            <text class="num">1</text>
          </view>
        </view>

        <view class="comment-list">
          <view class="comment-item cbox">
            <view class="head rbox box_y_center">
              <view class="avatar"></view>
              <text class="name">用户1232</text>
            </view>
            <view class="line rbox">文章说的也太棒了！感谢分享</view>
            <view class="bottom rbox box_space_b box_y_center">
              <view class="date">50分钟前</view>
              <view class="comment rbox box_y_center">
                <view class="iconfont icon-comments"></view>
                <text class="num">1</text>
              </view>
            </view>

            <view class="reply">
              <view class="reply-item">
                <text class="name">植物病学专家</text>回复：谢谢你
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="comment-wrap rbox box_center">
      <view class="cmt rbox box_x_center">输入您的评论或观点</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.f-forum {
  padding-bottom: 160rpx;
  .forum-list {
    padding: 0 54rpx;
    margin-top: 30rpx;
    .forum-item {
      .tit {
        font-size: 32rpx;
        line-height: 1.2;
        color: #404040;
      }
      .head {
        margin-top: 20rpx;
        .user {
          .avatar {
            width: 66rpx;
            height: 66rpx;
            border-radius: 50%;
            background-color: #e9c2c2;
          }
          .name {
            margin-left: 24rpx;
            font-size: 28rpx;
            line-height: 1;
            color: #1de1c3;
          }
        }
        .quiz {
          padding: 10rpx 16rpx;
          font-size: 22rpx;
          line-height: 1;
          color: #949494;
          background-color: #eee;
          border-radius: 10rpx;
        }
      }
      .viewport {
        margin-top: 20rpx;
        font-size: 28rpx;
        line-height: 1.4;
        color: #404040;
      }
      .img-wrap {
        margin-top: 20rpx;
        .img {
          margin-bottom: 26rpx;
          width: 308rpx;
          height: 272rpx;
          background: #e9c2c2;
          border-radius: 10rpx;
          &:nth-of-type(2n) {
            margin-left: 26rpx;
          }
        }
      }
      .footer {
        .date {
          font-size: 24rpx;
          line-height: 1;
          color: #929292;
        }
        .comment {
          .iconfont {
            font-size: 24rpx;
            color: #929292;
          }
          .num {
            margin-left: 10rpx;
            font-size: 24rpx;
            line-height: 1;
            color: #929292;
          }
        }
      }
    }

    .comment-list {
      .comment-item {
        .head {
          .avatar {
            width: 66rpx;
            height: 66rpx;
            background-color: #e9c2c2;
            border-radius: 50%;
          }
          .name {
            margin-left: 24rpx;
            font-size: 28rpx;
            line-height: 1;
            color: #1de1c3;
          }
        }
        .line {
          margin-left: 90rpx;
          margin-top: 10rpx;
          font-size: 28rpx;
          line-height: 1;
          color: #464646;
        }
        .bottom {
          margin-left: 90rpx;
          margin-top: 10rpx;
          .date {
            font-size: 24rpx;
            line-height: 1;
            color: #979797;
          }
          .comment {
            .iconfont {
              font-size: 24rpx;
              color: #979797;
            }
            .num {
              margin-left: 10rpx;
              font-size: 24rpx;
              line-height: 1;
              color: #979797;
            }
          }
        }
        .reply {
          position: relative;
          margin-top: 40rpx;
          padding: 28rpx 30rpx;
          background-color: #f7f7f7;
          border-radius: 10rpx;
          &::before {
            position: absolute;
            top: -14rpx;
            left: 40rpx;
            content: "";
            width: 0;
            height: 0;
            border-left: 8rpx solid transparent;
            border-right: 8rpx solid transparent;
            border-bottom: 14rpx solid #f7f7f7;
          }
          .reply-item {
            font-size: 24rpx;
            line-height: 1;
            color: #464646;
            .name {
              color: #1de1c3;
            }
          }
        }
      }
    }
  }
  .comment-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 22rpx 52rpx 78rpx;
    width: 100vw;
    background-color: #fff;
    border-top: 1rpx solid #f7f7f7;
    .cmt {
      padding: 17rpx 0;
      width: 100%;
      font-size: 24rpx;
      line-height: 1;
      color: #afafaf;
      background-color: #f7f7f7;
      border-radius: 42rpx;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    }
  }
}
</style>